<template>
  <div class="x-file-explorer-lite-nav-tree tree-box">
    <EditableTree
      ref="etTree"
      label="文件夹"
      :icon="false"
      :confirm-button="false"
      add-root-node-button-style=""
      :save-api="saveApi"
      :update-api="updateApi"
      readonly
      :delete-api="deleteApi"
      :default-expanded-keys="[]"
      :current-node-key="-1"
      expand-first-node
      :fetch-api="fetchApi"
      :tree-props="defaultProps"
      context-menu-inline
      v-bind="$attrs"
      context-menu
      @node-loaded="() => setCurrentKey(currentKey)"
      v-on="$listeners">
      <template #label="{ data, node }">
        <span style="padding-right: 10px">
          <i :class="getNodeIcon(data, node)" style="color: #fd8922"></i>
          {{ node.label }}
        </span>
      </template>
      <template #context-menu="{ curNode, curData }">
        <li class="menu-item" @click="appendChildNode(curNode, curData)">
          <i class="menu-item-icon el-icon-lx-add" style="color: #228b22"></i>新建
        </li>
        <li v-show="curNode.level !== 1" class="menu-item" @click="editNode(curNode, curData)">
          <i class="menu-item-icon el-icon-edit-outline" style="color: #ffa500"></i>重命名
        </li>
        <li v-show="curNode.level !== 1" class="menu-item" @click="removeNodeModal(curNode, curData)">
          <i class="menu-item-icon el-icon-delete" style="color: #f00"></i>删除
        </li>
      </template>
    </EditableTree>
  </div>
</template>

<script>
  export default {
    name: 'XFileExplorerLiteNavTree',
    props: {
      saveApi: Function,
      updateApi: Function,
      deleteApi: Function,
      fetchApi: Function,
      currentKey: [String, Number]
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    methods: {
      getNodeIcon(data, node) {
        if (data.icon) {
          return data.icon
        } else {
          if (node.expanded) {
            return 'el-icon-folder-opened'
          } else {
            return 'el-icon-folder'
          }
        }
      },
      appendChildNode(curNode, curData) {
        this.$refs.etTree.appendChildNode(curNode, curData)
      },
      editNode(curNode, curData) {
        this.$refs.etTree.editNode(curNode, curData)
      },
      removeNodeModal(curNode, curData) {
        this.$refs.etTree.removeNodeModal(curNode, curData)
      },
      setCurrentKey(key) {
        if (key) {
          this.$refs.etTree && this.$refs.etTree.setCurrentKey(key)
        }
      }
    }
  }
</script>

<style lang="scss">
  .x-file-explorer-lite-nav-tree {
    .el-tree-node__content {
      height: 36px;
    }
  }
</style>
